# 介绍

FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快速创建固定布局或自由连线布局模式的流程，并提供一套交互的最佳实践, 很适合有明确输入和输出的可视化工作流。

在 AI 如火如荼的当下，我们也会更专注于如何让流程赋能 AI，为此特意加上 AI 后缀。

<div className="rs-highlight">
  FlowGram = Flow + Program，寓意流程如程序一样，拥有 Condition、Loop 甚至 TryCatch 节点。
</div>


## 官方 Demo


<div style={{marginTop: 16, display: 'flex', gap: 8 }}>
  <div>
    <div>
      <a className="rs-link" href="/examples/fixed-layout/fixed-feature-overview.html">
        固定布局
      </a>
    </div>
    <div className="rs-tip" style={{ height: 54 }}>
      固定的排版，节点/分支支持指定位置拖拽移动，并提供分支、循环等复合节点
    </div>
    <div>
      <img loading="lazy" src="/fixed-layout/fixed-layout-demo.gif"/>
    </div>
  </div>
  <div>
    <div>
      <a className="rs-link" href="/examples/free-layout/free-feature-overview.html">
        自由连线布局
      </a>
    </div>
    <div className="rs-tip" style={{ height: 54 }}>
      自由的排版，节点支持任意位置移动，通过自由连线连接节点
    </div>
    <div>
      <img loading="lazy" src="/free-layout/free-layout-demo.gif"/>
    </div>
  </div>
</div>

## 交互体验

提供一套交互的最佳实践，让操作流程更加丝滑

<table className="rs-table">
  <tr>
    <td>Motion 过渡动画</td>
    <td>
      <p>
        Motion 动画在 Web 端应用可追溯到 Material Design，里边提到元素的变化如宽高或位置需要一个过渡过程，画布引擎会把线条和节点拆分单独绘制，使实现 Motion 过渡动画成本大大降低
      </p>
      <div className="rs-center">
        <img loading="lazy" src="/common/motion.gif" />
      </div>
    </td>
  </tr>
  <tr>
    <td>触摸板手势缩放 + 空格自由拖动画布</td>
    <td>
      <p>
        手势指在 Mac 触摸板两指展开/合并可以实现画布放大/缩小，或者按住空格拖动画布，交互借鉴 Sketch、Figma
      </p>
      <div className="rs-center">
        <img loading="lazy" src="/common/touch-pad.gif"  />
      </div>
    </td>
  </tr>
  <tr>
    <td>缩略图</td>
    <td>
      <div className="rs-center">
        <img loading="lazy" src="/fixed-layout/minimap.gif"  />
      </div>
    </td>
  </tr>
  <tr>
    <td>撤销/重做</td>
    <td>
      <div className="rs-center">
        <img loading="lazy" src="/fixed-layout/redo-undo.gif"  />
      </div>
    </td>
  </tr>
  <tr>
    <td>复制/粘贴(支持快捷键)</td>
    <td>
      <div className="rs-center">
        <img loading="lazy" src="/fixed-layout/copypaste.gif"  />
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>
        <div>框选 + 拖拽</div>
        <div>(固定)</div>
      </div>
    </td>
    <td>
      <div className="rs-center">
        <div className="rs-center">
          <img loading="lazy" src="/fixed-layout/dragdrop.gif"  />
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>水平/垂直布局切换</div>
      <div>(固定)</div>
    </td>
    <td>
      <div className="rs-center">
        <img loading="lazy" src="/fixed-layout/layout-change.gif"  />
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>分支折叠</div>
      <div>(固定)</div>
    </td>
    <td>
      <div className="rs-center">
        <img loading="lazy" src="/fixed-layout/fold.gif"  />
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>分组</div>
      <div>(固定)</div>
    </td>
    <td>
      <div className="rs-center">
        <img loading="lazy" src="/fixed-layout/group.gif"  />
      </div>
    </td>
  </tr>
  <tr>
    <td>
      自动整理
      <div>(自由)</div>
    </td>
    <td>
      <div className="rs-center">
        <img loading="lazy" src="/free-layout/autolayout.gif"  />
      </div>
    </td>
  </tr>
  <tr>
    <td>
      吸附对齐 + 参考线
      <div>(自由)</div>
    </td>
    <td>
      <div className="rs-center">
        <img loading="lazy" src="/free-layout/snap.gif"  />
      </div>
    </td>
  </tr>
  <tr>
    <td>
      Coze Loop 子画布
      <div>(自由)</div>
    </td>
    <td>
      <div className="rs-center">
        <img loading="lazy" src="/free-layout/loop.gif"  />
      </div>
    </td>
  </tr>
</table>

## 线上应用

<div style={{marginTop: 16, display: 'flex', gap: 8 }}>
  <div>
    <div>
      <a className="rs-link" href="https://www.coze.cn/open/docs/guides/workflow" target="_blank">
        扣子工作流
      </a>
    </div>
    <div>
      <img loading="lazy" src="/ref-coze.png"/>
    </div>
  </div>
  <div>
    <a className="rs-link" href="https://ae.feishu.cn/hc/zh-CN/articles/120610822514" target="_blank" >
      飞书低代码平台工作流
    </a>
    <div>
      <img loading="lazy" src="/ref-apaas.png"/>
    </div>
  </div>
  <div>
    <a className="rs-link" href="https://www.feishu.cn/hc/zh-CN/articles/908751305974-%E4%BB%80%E4%B9%88%E6%98%AF%E5%A4%9A%E7%BB%B4%E8%A1%A8%E6%A0%BC%E5%B7%A5%E4%BD%9C%E6%B5%81" target="_blank" >
      飞书多维表格工作流
    </a>
    <div>
      <img loading="lazy" src="/ref-bitable.png"/>
    </div>
  </div>
</div>



